<template>
    <table>
        <thead>
        <tr>
            <th v-for="item in columns">{{item.title}}</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(row, rowIndex) in data">
            <td v-for="col in columns">
                <template v-if="'render' in col">
                    <render :row="row" :column="col" :index="rowIndex" :render="col.render"></render>
                </template>

                <template v-else>{{ row[col.key] }}</template>
            </td>
        </tr>
        </tbody>
    </table>
</template>

<script type="text/ecmascript-6">
  import Render from './render.js'

  export default {
    components: { Render },
    props: {
      columns: {
        type: Array,
        default() {
          return [] // 注意的是，如果 props 的类型是对象或数组，它的默认值必须从一个工厂函数获取
        }
      },
      data: {
        type: Array,
        default() {
          return []
        }
      }
    }
  }
</script>

<style scoped lang="less">
    table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        empty-cells: show;
        border: 1px solid #e9e9e9;
    }

    table th {
        background: #f7f7f7;
        color: #5c6b77;
        font-weight: 600;
        white-space: nowrap;
    }

    table td, table th {
        padding: 8px 16px;
        border: 1px solid #e9e9e9;
        text-align: left;
    }
</style>
